<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="col-md-6 offset-md-3"> <div class="carousel slide text-center" id="myCarousel" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <div class="col-md-4"><a href="#"><img src="http://placehold.it/500/bbb/fff&text=1" class="img-fluid"></a></div> </div> <div class="carousel-item"> <div class="col-md-4"><a href="#"><img src="http://placehold.it/500/ccc?text=2" class="img-fluid"></a></div> </div> <div class="carousel-item"> <div class="col-md-4"><a href="#"><img src="http://placehold.it/500/999/fff?text=3" class="img-fluid"></a></div> </div> <div class="carousel-item"> <div class="col-md-4"><a href="#"><img src="http://placehold.it/500/ddd/?text=4" class="img-fluid"></a></div> </div> <div class="carousel-item"> <div class="col-md-4"><a href="#"><img src="http://placehold.it/500/aaa/333?text=5" class="img-fluid"></a></div> </div> <div class="carousel-item"> <div class="col-md-4"><a href="#"><img src="http://placehold.it/500/bbb/fff?text=6" class="img-fluid"></a></div> </div> </div> <a class="left carousel-control mt-3 p-4" href="#myCarousel" data-slide="prev"> <i class="fa fa-chevron-left"></i> </a> <a class="right carousel-control mt-3 p-4" href="#myCarousel" data-slide="next"> <i class="fa fa-chevron-right"></i> </a> </div> </div>

/* single slide at once */ .carousel-inner .active.left {left: -33%;} .carousel-inner .next {left: 33%;} .carousel-inner .prev {left: -33%;} .carousel-item.active.left {opacity:0.3;} .carousel-item.active.right {opacity:0.3;} .carousel-item.active.left > div:not(:first-child) { display:none; } .carousel-item.active.right > div:not(:first-child) { display:none; } .carousel-control { color:#333; } .carousel-control.left, .carousel-control.right {background-image:none;}

$('#myCarousel').carousel({ interval: 3000 }) $('.carousel .carousel-item').each(function(){ var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); if (next.next().length>0) { next.next().children(':first-child').clone().appendTo($(this)); } else { $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); } });